<template>
    <div>
        <!-- 表单 -->
        <el-form :inline="true" :model="query" size="mini">
            <el-form-item label="姓名">
                <el-input v-model="query.name" placeholder="客户姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="query.phone" placeholder="手机号" clearable></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="query.gender" placeholder="请选择性别" clearable>
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                </el-select>
            </el-form-item>
            <br>
            <el-form-item label="最后操作时间">
                <el-date-picker
                    v-model="dateRange"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
            ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="pageQuery">查询</el-button>
            </el-form-item>
        </el-form>

        <!--表格-->
        <el-table size="small" border :data="tableData" style="width: 100%" stripe highlight-current-row>
            <el-table-column prop="id" label="编号" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" align="center"></el-table-column>
            <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
            <el-table-column label="性别" align="center">
                <template slot-scope="scope">
                    {{ scope.row.gender == 1 ? '男' : '女' }}
                </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" align="center"></el-table-column>
            <el-table-column prop="qq" label="QQ" align="center"></el-table-column>
            <el-table-column align="center" label="最后操作时间">
                <template slot-scope="scope">
                    {{ scope.row.updateTime ? scope.row.updateTime.replace('T', ' ') : '' }}
                </template>
            </el-table-column>

            <el-table-column align="center" label="操作">
                <el-switch active-color="#13ce66" disabled>
                </el-switch>
            </el-table-column>
        </el-table>

        <br>
        <!-- 分页条 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
            layout="sizes,prev, pager, next,jumper,total" :total="total"></el-pagination>

    </div>
</template>

<script>
//导入axios
import axios from "axios";

export default {
    data() {
        return {
            dateRange: [],
            query: {
                name:undefined,
                phone:undefined,
                gender:undefined,
                beginTime:undefined,
                endTime:undefined,
                page: 1,
                size: 10,
            },
            total: 100,
            tableData: [],
        };
    },
    methods: {
        //分页
        pageQuery: function () {
            if(this.dateRange.length>0){
                this.query.beginTime = this.dateRange[0];
                this.query.endTime = this.dateRange[1];
            }
            console.log(this.query);
            axios.get("http://localhost:8080/customer/pageQuery", { params: this.query }).then((result) => {
                if (result.data.code == 1) {
                    this.tableData = result.data.data.rows;
                    this.total = result.data.data.total;
                } else {
                    this.$message.error("查询失败");
                }
            }).catch((e) => {
                this.$message.error("操作失败");
            });
        },

        onSubmit: function () {
            this.pageQuery();
        },

        handleSizeChange(val) {
            this.query.size = val;
            this.pageQuery();
        },
        handleCurrentChange(val) {
            this.query.page = val;
            this.pageQuery();
        },
    },

    mounted() {
        this.pageQuery(); //当页面加载完成后，发送异步请求，获取数据
    }
}
</script>